import { Button, List, Tag, Typography } from "antd";
import { useEffect, useState } from "react";

interface Project {
	id: string;
	name: string;
	description: string;
	status: string;
	createTime: number;
}

const mockProjects: Project[] = [
	{
		id: "1",
		name: "示例项目 1",
		description: "这是一个示例项目的描述",
		status: "进行中",
		createTime: Date.now(),
	},
	{
		id: "2",
		name: "示例项目 2",
		description: "另一个示例项目的描述",
		status: "已完成",
		createTime: Date.now() - 86400000,
	},
];

export const ProjectList = () => {
	const [projects, setProjects] = useState<Project[]>([]);
	const [loading, setLoading] = useState(false);

	useEffect(() => {
		const fetchProjects = async () => {
			setLoading(true);
			try {
				// TODO: 替换为实际的 API 调用
				await new Promise(resolve => setTimeout(resolve, 1000));
				setProjects(mockProjects);
			} catch (error) {
				console.error("Failed to fetch projects:", error);
			} finally {
				setLoading(false);
			}
		};

		fetchProjects();
	}, []);

	const getStatusTag = (status: string) => {
		const statusMap: Record<string, { color: string; text: string }> = {
			"进行中": { color: "processing", text: "进行中" },
			"已完成": { color: "success", text: "已完成" },
			"已暂停": { color: "warning", text: "已暂停" },
		};

		const statusInfo = statusMap[status] || { color: "default", text: status };
		return <Tag color={statusInfo.color}>{statusInfo.text}</Tag>;
	};

	return (
		<div className="p-4">
			<div className="flex justify-between items-center mb-4">
				<Typography.Title level={4} style={{ margin: 0 }}>
					项目列表
				</Typography.Title>
				<Button type="primary">新建项目</Button>
			</div>

			<List
				dataSource={projects}
				loading={loading}
				renderItem={(project) => (
					<List.Item
						className="cursor-pointer hover:bg-gray-50 transition-colors"
						style={{ padding: "16px", borderRadius: "8px" }}
					>
						<List.Item.Meta
							title={
								<div className="flex justify-between items-center">
									<span>{project.name}</span>
									{getStatusTag(project.status)}
								</div>
							}
							description={
								<div className="text-gray-500 mt-2">
									<div>{project.description}</div>
									<div className="text-xs mt-2">
										创建时间：{new Date(project.createTime).toLocaleString()}
									</div>
								</div>
							}
						/>
					</List.Item>
				)}
			/>
		</div>
	);
};
